<style>
.group-map{width: 100%;flex-wrap: wrap;}
.group-map>*{margin-bottom: 10px;}
</style>
<template>
  <list_url ref="list_url" :config="config" style="">
    <template #head_extend>
      <div class="flex group-map" style="flex-wrap: wrap;width: 100%;">
        <el-button v-for="(v,k) in group_map" :type="k==now_group?'primary':''" @click="now_group=k" >{{v}}</el-button>
      </div>
    </template>
    <template #value="{row}">
      <component v-if="row.type" :is="row.type" is_info="1" no_table="1" :value="row.value" :config="row.config" ></component>
    </template>
    <template #action="{row}">
      <el-button v-if="can_edit" @click="to_edit(row)" size="small">编辑</el-button>
      <el-button v-if="can_edit_value" @click="to_edit_value(row)" size="small">修改值</el-button>
    </template>
  </list_url>
</template>
<script>
import {iframe, in_right_admin} from "@/js/tool.js";
import {_config} from "@/js/s94_tool.js";
import s94Mjs from "s94-js";
import {ajax} from "@/js/api_tool.js";

export default {
  props: ['__iframe'],
  data(){
    let app = this, btns = {}, is_del = this.$get('is_del');
    let forms_config = {};
    let type_map = this.field_type(this.field_type.CAN_CONFIG, 'label');
    let yes_no_config = ['<span style="color: var(--el-color-danger)">否</span>','<span style="color: var(--el-color-primary)">是</span>'];
    let now_group = this.$get('group','system');
    let list_cols = {
      id: {name:'id', label:'ID', width:'65px', fixed:'left', type: 'hidden', order:true},
      group: {name:'group', label:'配置组',width:'100px',type:'hidden',config:[]},
      name: {name:'name', label:'配置名',width:'180px', align:'left'},
      tips: {name:'tips', label:'配置说明',type:'text_more',min_width:'100px'},
      type: {name:'type', label:'组件类型',width:'100px',type:'select_one',config:type_map},
      value: {name:'value', label:'值',type:'value', min_width:'100px'},
      is_inherit: {name:'is_inherit', label:'是否继承',type:'select_one',config:yes_no_config,width:'80px'},
    };
    if (!_config('this_tenant.id')){
      Object.assign(list_cols, {
        is_only: {name:'is_only', label:'是否唯一',type:'select_one',config:yes_no_config,width:'80px'},
        sort: {name:'sort', label:'排序', type:'text_one', config:'number', can_edit:true, width: '70px', onchange:this.edit},
      })
      if(in_right_admin('Config/add')) btns['添加配置'] = function(){ iframe('config/edit') }
      if(in_right_admin('Config/delete')) btns['彻底删除'] = function(){ app.$refs['list_url'].delete() }
    }
    list_cols['action'] = {name:'action', label:'操作', width:'150px', type:'action', fixed:'right'};

    return {
      can_edit: !_config('this_tenant.id') && in_right_admin('Config/edit'),
      can_edit_value: in_right_admin('Config/edit_value'),
      config: {
        api: '/admin/config/'+(is_del?'recycle':'list')+'?where[group][eq]='+now_group,
        title: "系统配置列表"+(is_del?'(已删除)':''),
        btns: btns,
        forms_config: forms_config,
        list_cols: list_cols,
        resdata: function(list){
          return list;
        },
      },
      yes_no_config: yes_no_config,
      group_map: {},
      now_group: now_group,
    }
  },
  watch: {
    now_group(v, oldV){
      if (v==oldV) return;
      this.config.api = '/admin/config/list?where[group][eq]='+v;
      this.$refs['list_url'].list();
    },
  },
  methods: {
    to_edit(row){
      let can_edit = in_right_admin('Config/edit') && ~[0,row.tenant_id].indexOf(_config('this_tenant.id'))
      let param = {
        id: row.id,
      }
      if (!can_edit) param['is_info'] = 1;
      iframe('config/edit?'+s94Mjs.param_encode(param))
    },
    to_edit_value(row){
      iframe('config/edit_value?id='+row.id);
    },
    edit(row,col,v){
      let app = this;
      if(!this.can_edit) return;
      ajax(`/admin/config/edit?id=${row.id}&${col.name}=${v}`, function (res){
        if (col.type=='radio_switch' && res.data==0) app.$refs['list_url'].list();
        if (col.type!='radio_switch' && res.data>0) app.$refs['list_url'].list();
      })
    },
  },
  mounted() {
    let app = this;
    if (!this.__iframe) window['app'] = this;

    ajax({url:'/admin/config/config_map',cache:true},function(res){
      app.group_map = res.data['group'];
      app.config.list_cols.group.config = res.data['group'];
      return false
    })
  }
}
</script>
